<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Y</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/indexstyle.css" rel="stylesheet">
    <link rel="icon" href="../img/logo.png" type="image/x-icon">
    <link rel="shortcut icon" href="../img/logo.png" type="image/x-icon">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <script src="../js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">


    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        .profile-card {
            display: flex;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #ddd;
        }
        .profile-img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
        }
        .profile-info {
            flex-grow: 1;
        }
        .dropdown-menu {
            min-width: auto;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <!-- Sidebar -->
        <div class="col-md-3 col-2 bg-light p-3" id="sidebar">
            <ul class="nav flex-column">
                <li class="nav-item">
                    <a class="aaa" href="index.html"><img src="../img/logo.png" alt="Home"></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="index.html"><img src="../img/home.png" alt="Home"> Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="friend.html"><img src="../img/friends.png" alt="Friends"> Friends</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Notification.html"><img src="../img/notification.png" alt="Notifications"> Notifications</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="myblog.html"><img src="../img/blog.png" alt="Messages"> Blog</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="user.html"><img src="../img/person.png" alt="Profile"> Profile</a>
                </li>
            </ul>
        </div>
        <!-- Main Content -->
        <div class="col-md-6 col-8 p-3" id="main-content">
            <h5>For you</h5>
            <!-- Tweets -->
            <div class="card mb-3">
                <div class="card-body">
                    <h6>User 1</h6>
                    <p>This is a tweet.</p>
                </div>
            </div>
            <div class="card mb-3">
                <div class="card-body">
                    <h6>User 2</h6>
                    <p>This is another tweet.</p>
                </div>
            </div>
            <!-- Add more tweet cards as needed -->
        </div>
        <!-- Right Sidebar -->
        <div class="col-md-3 col-2 bg-light p-3" id="right-sidebar">
            <!-- Profile Info Card -->
            <div class="profile-card">
                <?php include 'getUserInfo.php'; ?>
                <img src="<?php echo $avatar_url; ?>" alt="Profile Image" class="profile-img">
<!--                数据库-->
<!--                <div class="profile-info">-->
<!--                    <strong><?php echo $username; ?></strong><br>-->
<!--                    <small>@<?php echo strtolower(str_replace(' ', '', $username)) . '123'; // Example ID ?></small>-->
<!--                </div>-->
<!--                <div class="dropdown">-->
<!--                    <button class="btn btn-link dropdown-toggle" type="button" id="profileMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
<!--                        ...-->
<!--                    </button>-->
<!--                    <div class="dropdown-menu dropdown-menu-right" aria-labelledby="profileMenuButton">-->
<!--                        <a class="dropdown-item" href="#">切换账户</a>-->
<!--                        <a class="dropdown-item" href="#">注销账户</a>-->
<!--                    </div>-->

<!--                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
<!--                            Dropdown button-->
<!--                        </button>-->
<!--                        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">-->
<!--                            <a class="dropdown-item" href="#">Action</a>-->
<!--                            <a class="dropdown-item" href="#">Another action</a>-->
<!--                            <a class="dropdown-item" href="#">Something else here</a>-->
<!--                        </div>-->
<!--                </div>-->
                <div class="dropdown show">
                    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown link
                    </a>

                    <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<!--<script src="../js/bootstrap.min.js"></script>-->
<script>    $(document).ready(function() {
    $('.dropdown-toggle').dropdown();
});
</script>
</body>
</html>
<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<!--    <title>Profile</title>-->
<!--    <link href="../css/bootstrap.min.css" rel="stylesheet">-->
<!--    <link href="../css/indexstyle.css" rel="stylesheet">-->
<!--    <link rel="icon" href="../img/logo.png" type="image/x-icon">-->
<!--    <link rel="shortcut icon" href="../img/logo.png" type="image/x-icon">-->
<!--    <style>-->
<!--        .profile-card {-->
<!--            display: flex;-->
<!--            align-items: center;-->
<!--            padding: 10px;-->
<!--            border-bottom: 1px solid #ddd;-->
<!--        }-->
<!--        .profile-img {-->
<!--            width: 50px;-->
<!--            height: 50px;-->
<!--            border-radius: 50%;-->
<!--            margin-right: 10px;-->
<!--        }-->
<!--        .profile-info {-->
<!--            flex-grow: 1;-->
<!--        }-->
<!--        .dropdown-menu {-->
<!--            min-width: auto;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<div class="container-fluid">-->
<!--    <div class="row">-->
<!--        &lt;!&ndash; Sidebar &ndash;&gt;-->
<!--        <div class="col-md-3 col-2 bg-light p-3" id="sidebar">-->
<!--            <ul class="nav flex-column">-->
<!--                <li class="nav-item">-->
<!--                    <a class="aaa" href="index.html"><img src="../img/logo.png" alt="Home"></a>-->
<!--                </li>-->
<!--                <li class="nav-item">-->
<!--                    <a class="nav-link active" href="index.html"><img src="../img/home.png" alt="Home"> Home</a>-->
<!--                </li>-->
<!--                <li class="nav-item">-->
<!--                    <a class="nav-link" href="friend.html"><img src="../img/friends.png" alt="Friends"> Friends</a>-->
<!--                </li>-->
<!--                <li class="nav-item">-->
<!--                    <a class="nav-link" href="Notification.html"><img src="../img/notification.png" alt="Notifications"> Notifications</a>-->
<!--                </li>-->
<!--                <li class="nav-item">-->
<!--                    <a class="nav-link" href="myblog.html"><img src="../img/blog.png" alt="Messages"> Blog</a>-->
<!--                </li>-->
<!--                <li class="nav-item">-->
<!--                    <a class="nav-link" href="user.html"><img src="../img/person.png" alt="Profile"> Profile</a>-->
<!--                </li>-->
<!--            </ul>-->
<!--        </div>-->
<!--        &lt;!&ndash; Main Content &ndash;&gt;-->
<!--        <div class="col-md-6 col-8 p-3" id="main-content">-->
<!--            <h5>For you</h5>-->
<!--            &lt;!&ndash; Tweets &ndash;&gt;-->
<!--            <div class="card mb-3">-->
<!--                <div class="card-body">-->
<!--                    <h6>User 1</h6>-->
<!--                    <p>This is a tweet.</p>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div class="card mb-3">-->
<!--                <div class="card-body">-->
<!--                    <h6>User 2</h6>-->
<!--                    <p>This is another tweet.</p>-->
<!--                </div>-->
<!--            </div>-->
<!--            &lt;!&ndash; Add more tweet cards as needed &ndash;&gt;-->
<!--        </div>-->
<!--        &lt;!&ndash; Right Sidebar &ndash;&gt;-->
<!--        <div class="col-md-3 col-2 bg-light p-3" id="right-sidebar">-->
<!--            &lt;!&ndash; Profile Info Card &ndash;&gt;-->
<!--            <div class="profile-card" id="profile-card">-->
<!--                &lt;!&ndash; 动态内容将在这里插入 &ndash;&gt;-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<!--&lt;!&ndash; Toast Notification &ndash;&gt;-->
<!--<div class="toast" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">-->
<!--    <div class="toast-header">-->
<!--        <img src="..." class="rounded mr-2" alt="...">-->
<!--        <strong class="mr-auto">Bootstrap</strong>-->
<!--        <small>11 mins ago</small>-->
<!--        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">-->
<!--            <span aria-hidden="true">&times;</span>-->
<!--        </button>-->
<!--    </div>-->
<!--    <div class="toast-body">-->
<!--        用户信息已加载-->
<!--    </div>-->
<!--</div>-->

<!--<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>-->
<!--<script src="../js/bootstrap.min.js"></script>-->
<!--<script>-->
<!--    document.addEventListener('DOMContentLoaded', function() {-->
<!--        fetch('http://localhost:3000/api/userinfo?id=1')-->
<!--            .then(response => response.json())-->
<!--            .then(data => {-->
<!--                const profileCard = document.getElementById('profile-card');-->
<!--                profileCard.innerHTML = `-->
<!--                    <img src="${data.avatar_url}" alt="Profile Image" class="profile-img">-->
<!--                    <div class="profile-info">-->
<!--                        <strong>${data.username}</strong><br>-->
<!--                        <small>@${data.username.toLowerCase().replace(/ /g, '')}123</small>-->
<!--                    </div>-->
<!--                    <div class="dropdown">-->
<!--                        <button class="btn btn-link dropdown-toggle" type="button" id="profileMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">-->
<!--                            ...-->
<!--                        </button>-->
<!--                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="profileMenuButton">-->
<!--                            <a class="dropdown-item" href="#">切换账户</a>-->
<!--                            <a class="dropdown-item" href="#">注销账户</a>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                `;-->

<!--                // 显示 Toast 通知-->
<!--                const toastElement = document.getElementById('liveToast');-->
<!--                const toast = new bootstrap.Toast(toastElement);-->
<!--                toast.show();-->
<!--            })-->
<!--            .catch(error => console.error('Error:', error));-->
<!--    });-->
<!--</script>-->
<!--</body>-->
<!--</html>-->
